<template>
    <div class="goods-detail">
        <div class="back-button" @click="goBack">
            <van-icon name="arrow-left" size="20" />
        </div>
        
        <div class="brand-section" v-if="brandInfo">
            <div>
                <img :src="brandInfo.picUrl" class="brand-logo" />
            </div>
            <div class="brand-content">
                <h2 class="brand-name">{{ brandInfo.name }}</h2>
                <p class="brand-desc">{{ brandInfo.desc }}</p>
            </div>
        </div>
        <div class="goods-list">
            <div class="goods-item" v-for="goods in goodsList" :key="goods.id" @click="goToGoodsDetail(goods.id)">
                <img :src="goods.picUrl" class="goods-image" />
                <div class="goods-info">
                    <div class="goods-name">{{ goods.name }}</div>
                    <div class="goods-brief">{{ goods.brief }}</div>
                    <div class="goods-price">
                        <span class="current">¥{{ goods.retailPrice }}</span>
                        <span class="original" v-if="goods.counterPrice > goods.retailPrice">
                            ¥{{ goods.counterPrice }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBrandDetail, getGoodsListByBrand } from '@/api/home'
import { Icon as VanIcon } from 'vant' 

const router = useRouter()
const route = useRoute()
const brandInfo = ref(null)
const goodsList = ref([])

const goBack = () => {
    router.go(-1)
}

onMounted(async () => {
    const { brandId } = route.query
    if (brandId) {
        await Promise.all([
            fetchBrandDetail(brandId),
            fetchGoodsList(brandId)
        ])
    }
})

const fetchBrandDetail = async (brandId) => {
    const response = await getBrandDetail({ id: brandId })
    if (response.errno === 0) {
        brandInfo.value = response.data
    }
}

const fetchGoodsList = async (brandId) => {
    const response = await getGoodsListByBrand({ brandId })
    if (response.errno === 0) {
        goodsList.value = response.data.list
    }
}

const goToGoodsDetail = (id) => {
    router.push({
        path: '/goods/detail',
        query: { id }
    })
}
</script>

<style scoped>
.goods-detail {
    background: #f5f5f5;
    min-height: 100vh;
    position: relative;
     min-width: 78vh;
}

.back-button {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-section {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: white;
    margin-bottom: 10px;
    position: relative;
}
.brand-section img{
    width: 100%;
    height: auto;
     object-fit: cover;
}
.brand-logo {
    width: 100%;
    height: 200px;
    margin-right: 15px;
    object-fit: cover;
}

.brand-content {
    flex: 1;
}

.brand-name {
    font-size: 44px;
    font-weight: bold;
    border-bottom: white;
    margin-bottom: 8px;
    color: white;
    position: absolute;
    top: 230px;
    left: 224px
}

.brand-desc {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin-bottom: 10px;
}

.floor-price {
    color: #ff2f55;
    font-weight: bold;
    font-size: 16px;
}

.goods-list {
    padding: 0 10px;
    background: white;
}

.goods-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.goods-image {
    width: 100px;
    height: 100px;
    margin-right: 12px;
    object-fit: cover;
}

.goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.goods-brief {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.goods-price {
    margin-top: 10px;
}

.current {
    font-size: 16px;
    color: #ff2f55;
    font-weight: bold;
    margin-right: 8px;
}

.original {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}
</style>